<template>
  <div class="sidebar-groups">
    <section class="sidebar-group"><p class="sidebar-group__title">Basic 基础组件</p><a class="link"
                                                                                        href="/zh-CN/component/button"
    ><p
        class="link-text">Button 按钮</p><!----></a><a class="link" href="/zh-CN/component/border"
    ><p class="link-text"
    >
      Border 边框</p><!----></a><a class="link" href="/zh-CN/component/color"><p class="link-text"
    >
      Color 色彩</p><!----></a><a class="link" href="/zh-CN/component/container"><p class="link-text"
    >
      Container 布局容器</p><!----></a><a class="link" href="/zh-CN/component/icon"><p
        class="link-text">Icon 图标</p><!----></a><a class="link" href="/zh-CN/component/layout"
    ><p class="link-text"
    >Layout
      布局</p><!----></a><a class="link active" href="/zh-CN/component/link"><p class="link-text"
    >
      Link 链接</p><!----></a><a class="link" href="/zh-CN/component/scrollbar"><p class="link-text"
    >
      Scrollbar 滚动条</p><!----></a><a class="link" href="/zh-CN/component/space"><p
        class="link-text">Space 间距</p><!----></a><a class="link" href="/zh-CN/component/typography"
    ><p class="link-text"
    >
      Typography 排版</p><!----></a></section>
    <section class="sidebar-group"><p class="sidebar-group__title">配置组件</p><a class="link"
                                                                                  href="/zh-CN/component/config-provider"
    ><p
        class="link-text">Config Provider 全局配置</p><!----></a></section>
    <section class="sidebar-group"><p class="sidebar-group__title">Form 表单组件</p><a class="link"
                                                                                       href="/zh-CN/component/autocomplete"
    ><p
        class="link-text">Autocomplete 自动补全输入框</p><!----></a><a class="link"
                                                                       href="/zh-CN/component/cascader"
    ><p
        class="link-text">Cascader 级联选择器</p><!----></a><a class="link"
                                                               href="/zh-CN/component/checkbox"
    ><p
        class="link-text">Checkbox 多选框</p><!----></a><a class="link"
                                                           href="/zh-CN/component/color-picker"
    ><p class="link-text"
    >
      Color Picker 取色器</p><!----></a><a class="link" href="/zh-CN/component/date-picker"><p
        class="link-text">Date Picker 日期选择器</p><!----></a><a class="link"
                                                                  href="/zh-CN/component/datetime-picker"
    ><p
        class="link-text">DateTime Picker 日期时间选择器</p><!----></a><a class="link"
                                                                          href="/zh-CN/component/form"
    ><p
        class="link-text">Form 表单</p><!----></a><a class="link" href="/zh-CN/component/input"
    ><p class="link-text"
    >Input
      输入框</p><!----></a><a class="link" href="/zh-CN/component/input-number"><p class="link-text"
    >
      Input Number 数字输入框</p><!----></a><a class="link" href="/zh-CN/component/radio"><p
        class="link-text">Radio 单选框</p><!----></a><a class="link" href="/zh-CN/component/rate"
    ><p class="link-text"
    >Rate
      评分</p><!----></a><a class="link" href="/zh-CN/component/select"><p class="link-text"
    >Select
      选择器</p><!----></a><a class="link" href="/zh-CN/component/select-v2"><p class="link-text"
    >
      Virtualized Select 虚拟化选择器</p><!----></a><a class="link" href="/zh-CN/component/slider"><p
        class="link-text">Slider 滑块</p><!----></a><a class="link" href="/zh-CN/component/switch"
    ><p class="link-text"
    >
      Switch 开关</p><!----></a><a class="link" href="/zh-CN/component/time-picker"><p
        class="link-text">Time Picker 时间选择器</p><!----></a><a class="link"
                                                                  href="/zh-CN/component/time-select"
    ><p
        class="link-text">Time Select 时间选择</p><!----></a><a class="link"
                                                                href="/zh-CN/component/transfer"
    ><p
        class="link-text">Transfer 穿梭框</p><!----></a><a class="link"
                                                           href="/zh-CN/component/upload"
    ><p class="link-text"
    >
      Upload 上传</p><!----></a></section>
    <section class="sidebar-group"><p class="sidebar-group__title">Data 数据展示</p><a class="link"
                                                                                       href="/zh-CN/component/avatar"
    ><p
        class="link-text">Avatar 头像</p><!----></a><a class="link" href="/zh-CN/component/badge"
    ><p class="link-text"
    >Badge
      徽章</p><!----></a><a class="link" href="/zh-CN/component/calendar"><p class="link-text"
    >
      Calendar 日历</p><!----></a><a class="link" href="/zh-CN/component/card"><p class="link-text"
    >
      Card 卡片</p><!----></a><a class="link" href="/zh-CN/component/carousel"><p class="link-text"
    >
      Carousel 走马灯</p><!----></a><a class="link" href="/zh-CN/component/collapse"><p
        class="link-text">Collapse 折叠面板</p><!----></a><a class="link"
                                                             href="/zh-CN/component/descriptions"
    ><p class="link-text"
    >
      Descriptions 描述列表</p><!----></a><a class="link" href="/zh-CN/component/empty"><p
        class="link-text">Empty 空状态</p><!----></a><a class="link" href="/zh-CN/component/image"
    ><p class="link-text"
    >
      Image 图片</p><!----></a><a class="link" href="/zh-CN/component/infinite-scroll"><p
        class="link-text">Infinite Scroll 无限滚动</p><!----></a><a class="link"
                                                                    href="/zh-CN/component/pagination"
    ><p
        class="link-text">Pagination 分页</p><!----></a><a class="link"
                                                           href="/zh-CN/component/progress"
    ><p class="link-text"
    >
      Progress 进度条</p><!----></a><a class="link" href="/zh-CN/component/result"><p
        class="link-text">Result 结果</p><!----></a><a class="link" href="/zh-CN/component/skeleton"
    ><p class="link-text"
    >
      Skeleton 骨架屏</p><!----></a><a class="link" href="/zh-CN/component/table"><p
        class="link-text">Table 表格</p><!----></a><a class="link flex items-center"
                                                      href="/zh-CN/component/table-v2"
    ><p class="link-text"
    >
      Virtualized Table 虚拟化表格</p><span class="el-tag el-tag--small el-tag--plain is-hit is-round ml-2"
    ><span class="el-tag__content">2.2.0</span>
      <!--v-if--></span></a><a class="link" href="/zh-CN/component/tag"><p class="link-text"
    >Tag
      标签</p><!----></a><a class="link" href="/zh-CN/component/timeline"><p class="link-text"
    >
      Timeline 时间线</p><!----></a><a class="link" href="/zh-CN/component/tree"><p class="link-text"
    >
      Tree 树形控件</p><!----></a><a class="link flex items-center" href="/zh-CN/component/tree-select"
    ><p class="link-text">TreeSelect 树形选择</p>
      <span class="el-tag el-tag--small el-tag--plain is-hit is-round ml-2"><span
          class="el-tag__content">2.1.8</span><!--v-if--></span></a><a class="link" href="/zh-CN/component/tree-v2"
    ><p class="link-text"
    >
      Virtualized Tree 虚拟化树形控件</p><!----></a></section>
    <section class="sidebar-group"><p class="sidebar-group__title">Navigation 导航</p><a class="link"
                                                                                         href="/zh-CN/component/affix"
    ><p
        class="link-text">Affix 固钉</p><!----></a><a class="link" href="/zh-CN/component/backtop"
    ><p class="link-text"
    >
      Backtop 回到顶部</p><!----></a><a class="link" href="/zh-CN/component/breadcrumb"><p
        class="link-text">Breadcrumb 面包屑</p><!----></a><a class="link"
                                                             href="/zh-CN/component/dropdown"
    ><p class="link-text"
    >
      Dropdown 下拉菜单</p><!----></a><a class="link" href="/zh-CN/component/menu"><p
        class="link-text">Menu 菜单</p><!----></a><a class="link" href="/zh-CN/component/page-header"
    ><p class="link-text"
    >Page
      Header 页头</p><!----></a><a class="link" href="/zh-CN/component/steps"><p class="link-text"
    >
      Steps 步骤条</p><!----></a><a class="link" href="/zh-CN/component/tabs"><p class="link-text"
    >
      Tabs 标签页</p><!----></a></section>
    <section class="sidebar-group"><p class="sidebar-group__title">Feedback 反馈组件</p><a class="link"
                                                                                           href="/zh-CN/component/alert"
    ><p
        class="link-text">Alert 提示</p><!----></a><a class="link" href="/zh-CN/component/dialog"
    ><p class="link-text"
    >Dialog
      对话框</p><!----></a><a class="link" href="/zh-CN/component/drawer"><p class="link-text"
    >
      Drawer 抽屉</p><!----></a><a class="link" href="/zh-CN/component/loading"><p class="link-text"
    >
      Loading 加载</p><!----></a><a class="link" href="/zh-CN/component/message"><p class="link-text"
    >
      Message 消息提示</p><!----></a><a class="link" href="/zh-CN/component/message-box"><p
        class="link-text">Message Box 消息弹出框</p><!----></a><a class="link"
                                                                  href="/zh-CN/component/notification"
    ><p
        class="link-text">Notification 通知</p><!----></a><a class="link"
                                                             href="/zh-CN/component/popconfirm"
    ><p class="link-text"
    >
      Popconfirm 气泡确认框</p><!----></a><a class="link" href="/zh-CN/component/popover"><p
        class="link-text">Popover 弹出框</p><!----></a><a class="link"
                                                          href="/zh-CN/component/tooltip"
    ><p class="link-text"
    >
      Tooltip 文字提示</p><!----></a></section>
    <section class="sidebar-group"><p class="sidebar-group__title">Others 其他</p><a class="link"
                                                                                     href="/zh-CN/component/divider"
    ><p
        class="link-text">Divider 分割线</p><!----></a></section>
  </div>
</template>

<script setup>
import {onMounted} from "vue";
import * as all from "@/components/generator/config"
const keys = Object.keys(all) || []
const components={};
keys.forEach((k)=>{
  if(k.indexOf("Components")>0){
    const list=all[k];
    for(const l of list){
      components[l.__config__.tag]=l;
    }
  }
})

onMounted(() => {
  const all = []
  for (const section of document.getElementsByTagName("section")) {
    const childrenNode = section.children;
    const children = [];
    const item = {children}
    for (const c of childrenNode) {
      if (c.tagName === 'P') {
        item.title = c.textContent.trim();
      }
      if (c.tagName === "A") {
        const key=c.getAttribute("href").replace("/zh-CN/component/","");
        const elKey="el-"+key;
        const cs=[];
        for(const key1 in components){
          const config=components[key1].__config__;
          if(config.tag==elKey||(config.document&&config.document.indexOf(key)>0)){
            cs.push(components[key1]);
          }
        }
        children.push({name:c.textContent.trim(),key,children:cs})
      }
    }
    all.push(item)
  }
  console.info(JSON.stringify(all,null,2).replace(/\"(.[^-\"]*?)\":/g, '$1:'));
})
</script>

<style scoped>

</style>
